<template>
  <div ref="divRef" class="ai-editor">
    <div class="aie-container">
      <div class="aie-container-header"></div>
      <div class="aie-container-main">
      </div>
      <div class="aie-container-footer"></div>
      <div class="aie-container-menu">
        <div class="aie-container-menu-title">大纲</div>
        <!-- <div class="aie-container-menu-item" v-for="item in menuList" :style="'padding-left:'+item.level * 20+'px;'" >{{item.text}}</div> -->
        <ElTree class="aie-container-menu-tree" :data="menuList" empty-text="暂无大纲" highlight-current
          :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick">
        </ElTree>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css"
import { ElTree, ElTooltip } from "element-plus"
import { getTree } from "./hook/index"
const divRef = ref();
let aiEditor: AiEditor | null = null;
const defaultProps = {
  children: 'children',
  label: 'text',
}
const myEmit = defineEmits<{
  (e: 'update:modelValue', content: string): void
}>()
//点击大纲跳转对应节点位置
const handleNodeClick = (data: any) => {
  console.log(data)
  const toDom = document.querySelector('.aie-container-main')
  const formDom = document.querySelector(`#${data.id}`)
  toDom?.scrollTo({
    top: formDom?.offsetTop,
    behavior: 'smooth'
  })
  console.log(formDom)
}

const menuList = ref([{ label: 'caidan' }])
onMounted(() => {
  aiEditor = new AiEditor({
    element: divRef.value as Element,
    placeholder: "点击输入内容...",
    content: '',
    toolbarKeys: ["undo", "redo", "brush", "eraser",
      "|", "heading", "font-size",
      "|", "bold", "italic", "underline", "strike", "link", "code", "subscript", "superscript", "hr", "todo", "emoji",
      "|", "highlight", "font-color",
      "|", "align", "line-height",
      "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break",
      "|", "image", "video", "attachment", "quote", "code-block", "container", "table",
      "|", "source-code", "printer", "fullscreen",
      // {
      //   icon: "ss",
      //   html: "<div>ss</div>",
      //   onClick: (event, editor) => {
      //     //点击事件

      //     console.log(event, editor)
      //   },
      //   tip: "鼠标移动上去的提示内容",
      // }
    ],
    // toolbarExcludeKeys: ['ai', 'font-family'],//排除工具栏按钮
    textSelectionBubbleMenu: {//浮动菜单
      enable: true,
      items: ["Bold", "Italic", "Underline", "Strike", "code", "comment"],
    },
    fontFamily: {
      values: [
        { name: "博客字体", value: "lastyear" },
      ]
    },

    onChange: (aiEditor) => {
      // 监听到用编辑器内容发生变化了，控制台打印编辑器的 html 内容...
      menuList.value = getTree(aiEditor.getOutline())
      myEmit('update:modelValue', aiEditor.getHtml())
    },
    onFocus: (aiEditor) => {
      console.log("获得焦点了....")
    },
    onBlur: (aiEditor) => {
      console.log("失去焦点了....")
    },
    onCreated: (aiEditor) => {
      console.log("AIEditor 创建了....")
      menuList.value = getTree(aiEditor.getOutline())
    },
    onDestroy: (aiEditor) => {
      console.log("AIEditor 被销毁了....")
    }
  })
})

onUnmounted(() => {
  aiEditor && aiEditor.destroy();
})

</script>

<style lang="scss" scoped>
@import url("./style/index.scss");
</style>